import React from 'react';
import PropTypes from 'prop-types';
import './index.scss';


class ImgList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listStyleLeft: 0,
    }
    this.prevList = this.prevList.bind(this)
    this.nextList = this.nextList.bind(this)
    this.itemClick = this.itemClick.bind(this)
  }
  componentDidMount() {
  }
  prevList() {
    this.setState({
      listStyleLeft: this.state.listStyleLeft + this.props.viewWidth,
    })
  }
  nextList() {
    this.setState({
      listStyleLeft: this.state.listStyleLeft - this.props.viewWidth,
    })
  }
  itemClick(index) {
    this.props.itemClick(index)
  }
  render() {
    const { imgs } = this.props;
    const listWidth = imgs.length * this.props.itemWidth;
    return (
      <div className="img-show-box">
        {this.state.listStyleLeft < 0 ?
          <span className="prev control-icon" onClick={this.prevList}>
            {'<'}
          </span> : ''
        }
        <div className="list-container" style={{ width: `${this.props.viewWidth}px` }}>
          <ul className="img-show-list" style={{ marginLeft: `${this.state.listStyleLeft}px`, width: listWidth }}>
            {imgs.map((item, index) => (
              <li
                key={item}
                className={this.props.showImgIndex === index ? 'img-item active' : 'img-item'}
                onClick={() => { this.itemClick(index) }}
              >
                <img src={item} alt="" />
              </li>
            ))
            }
          </ul>
        </div>
        {listWidth > this.props.viewWidth
          &&
          (listWidth + this.state.listStyleLeft) > this.props.viewWidth ?
            <span className="next control-icon" onClick={this.nextList}>
              {'>'}
            </span> : ''
        }
      </div>


    )
  }
}
export default ImgList;
ImgList.propTypes = {
  viewWidth: PropTypes.number,
  itemClick: PropTypes.func,
  imgs: PropTypes.arrayOf(Object),
  itemWidth: PropTypes.number,
  showImgIndex: PropTypes.number,
}
